<template>
  <div class="m-goods-manage">
    <w-panel-wrap>
      <w-panel-title></w-panel-title>
      <w-panel>
          <div class="top">请选择添加类型</div>
          <div class="nav-list form-horizontal">
            <div class=" col-sm-4" >
              <div class="nav-item" @click="$router.push('/goods/classify')">
                <div class="box">
                  <img src="../../assets/icon-import-manual.png" alt="">
                </div>
                <span>手动导入</span> 
              </div>
            </div>
            <div class="col-sm-4" @click="$router.push('/goods/eShopEnter')">
              <div class="nav-item">
              <div class="box">
                  <img src="../../assets/icon-import-eShop.png" alt="">
              </div>
              <span>E店宝导入</span> 
              </div>
            </div>
            <div class="col-sm-4" @click="excelEnter">
              <div class="nav-item">
              <div class="box">
                  <img src="../../assets/icon-import-excel.png" alt="">
              </div>
              <span>Excel导入</span> 
              </div>
            </div>
          </div>
      </w-panel>
    </w-panel-wrap>
  </div>
</template>

<script>
import { fileUploadUrl } from 'js/config'
import app from '../../main'
  export default {
    methods: {
      excelEnter() {
        this.$store.commit('clearAddGoodsInfo')
        this.createUploadForm()
      },
      // 创建form表单
      createUploadForm() {
        // 创建form表单
        const Forms = $(`<form action="${fileUploadUrl}" method="post" enctype="multipart/form-data"></form>`)
        const inputs = $(`<input type="file" name="filePath" />` +
                      `<input type="hidden" value=${this.$store.getters.storeId} name="storeId" />`)
        const FormInput = Forms.append(inputs)
        $('body').append(FormInput)
        inputs.click()
        this.uploadLocalImg(inputs, Forms)
      },
      // 图片上传
      uploadLocalImg(oInput, oForm) {
        const _this = this
        oInput.on('change', function (ev) {
          app.$spin.show()
          if (!/.XLS|.XLSX|.XLSM/i.test(ev.target.value)) {
            app.$toast('文档格式无效，请重新选择')
            return
          }
          oForm.ajaxSubmit(data => {
            app.$spin.hide()
            app.$toast(data.msg)
            if (data.code == 200) {
              app.$router.push('/goods/store')
            }
            oForm.remove()
          })
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
@import '../../scss/_var.scss';

  .m-goods-manage {
    .top {
      margin: 18px 0 48px 0;
      text-align: center;
      font-size: 24px;
      color: $color-dark;
    }
    .nav-list {
      height: 594px;
      .nav-item {
        width: 157px;
        background-color: #F20685;
        text-align: center;
        padding-bottom: 11px;
        margin: auto;
        cursor: pointer;
        .box {
          display: table-cell;
          vertical-align: middle;
          height: 136px;
          width: 157px;
          img {
            height: 58px;
            width: 58px;
            margin: 0 auto;
          }
        }
        span {
          font-size: 24px;
          color: $color-white;          
        }
      }
    }
  }
</style>